<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        body {
            margin: 0;
        }

        ul,
        ol {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wrapper {
            width: 600px;
            height: 500px;
            background-color: #ccc;
            display: flex;
            margin: 100px auto 0;
        }

        .wrapper .left {
            width: 150px;
            height: 500px;
            background-color: pink;
        }

        .wrapper .left ul li {
            cursor: pointer;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            font-weight: bold;
        }

        .wrapper .left ul li.active {
            background-color: skyblue;
            color: red;
        }

        .wrapper .right {
            width: 450px;
            height: 500px;
            background-color: skyblue;
            position: relative;
            overflow: hidden;
        }

        .wrapper .right ol {
            width: 450px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .wrapper .right ol li {
            width: 450px;
            height: 500px;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="left">
            <ul>
                <li class="active">一楼</li>
                <li>二楼</li>
                <li>三楼</li>
                <li>四楼</li>
                <li>五楼</li>
            </ul>
        </div>
        <div class="right">
            <ol>
                <li>一楼的内容</li>
                <li>二楼的内容</li>
                <li>三楼的内容</li>
                <li>四楼的内容</li>
                <li>五楼的内容</li>
            </ol>
        </div>
    </div>
    <script src="./js/animateV3.0.0.js"></script>
    <script>
        var lou = document.querySelectorAll(".left ul li");
        var content_1 = document.querySelector(".right ol");

        var setMenu = function (index) {
            for(var i = 0 ; i < lou.length ; i ++) {
                lou[i].className = "";
            }
            lou[index].className = "active";
        }

        var addEvent = function () {
            for(var j = 0 ; j < lou.length ; j ++) {
                lou[j].index = j ;
                lou[j].onclick = function () {
                    var index = this.index;
                    animate(content_1,"top" , -(index * 500));
                    setMenu(index);
                }
            }
        }

        addEvent();
    </script>
</body>

</html>